<template>
  <div class="col-box">
    <div class="col-but">
      <span v-for="(i, k) in dateButList" :key="i.key" @click="changeBut(i, k)"
            :class="[k === isBc ? 'action-span-item' : '', 'span-item']">{{ i.name }}</span>
    </div>
    <div class="col-input">
      <el-button type="text" v-if="boole === 1" @click="boole = 2">自定义逾期时常</el-button>
      <el-input-number v-if="boole === 2" v-model="input" controls-position="right"
                       @change="handleChange" :min="1" :max="999"/>
    </div>
    <slot></slot>

  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    reset: {
      type: Number,
      default: 0
    }
  },
  computed: {},
  watch: {
    reset: {
      handler(newValue) {
        if (newValue) {
          this.isBc = -1
          this.input = 1
          this.boole = 1
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      isBc: -1,
      dateButList: [
        {key: '0', name: "7天内", value: 7},
        {key: '1', name: "15天内", value: 15},
        {key: '2', name: "30天内", value: 30},
        {key: '3', name: "60天内", value: 60},
      ],
      input: 1,
      boole: 1
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    changeBut(val, idx) {
      this.isBc = idx
      this.input = val.value
      this.$emit('dateChange', this.handleTime(val.value))
    },
    handleChange(val) {
      console.log(val)
      if(val){
        this.$emit('dateChange', this.handleTime(val))
      }else{
        this.$emit('dateChange', this.handleTime(0))
      }

    },
    handleTime(val) {
      const now = new Date();
      const year = now.getFullYear();
      const month = this.padStart(now.getMonth() + 1);
      const day = this.padStart(now.getDate());
      const old = new Date(new Date().getTime() - val * 24 * 60 * 60 * 1000);

      const old_year = old.getFullYear();
      const old_month = this.padStart(old.getMonth() + 1);
      const old_day = this.padStart(old.getDate());
      const endTime = `${year}-${month}-${day}`;
      const startTime = `${old_year}-${old_month}-${old_day}`;

      return {startTime, endTime}

    },

    padStart(value) {
      return value.toString().padStart(2, '0');
    }
  },
};
</script>

<style scoped lang="scss">
.col-box {
  display: flex;
  align-items: center;

  .col-but {

  }

  .span-item {
    color: #606266;
    border-radius: 4px;
    margin: 0 6px;
    /* background-color: aqua; */
    padding: 4px 8px;
    cursor: pointer;
  }

  .action-span-item {
    background-color: rgb(217, 236, 255);
    color: #1890ff;
  }

  .col-input {
    display: flex;
    align-items: center;
    margin-left: 15px;
  }
}
</style>


